<template>
  <!-- 原材库存报表 -->
  <div class="statistics">
    <el-form ref="form" :model="form" label-width="100px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="选择时间范围" prop="workArea">
            <el-select v-model="form.value" placeholder="请选择">
              <el-option label="工区1" value="工区1"></el-option>
              <el-option label="工区2" value="工区2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="选择时间范围" prop="workArea">
            <el-date-picker
              style="width: 100%;"
              v-model="form.workArea"
              type="datetimerange"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8" style="text-align: right;">
          <el-button>重置</el-button>
          <el-button>查询</el-button>
        </el-col>
        <el-col :span="24">
          <el-button style="margin-bottom: 20px;" :loading="false" icon="el-icon-download">导出</el-button>
        </el-col>
      </el-row>
    </el-form>

    <div class="header">原材库存汇总表</div>

    <div class="content">
      <div class="contentTit">单位：</div>
      <div class="contentTit">制单时间：2022年05月18日</div>
      <div class="contentTit">制表人：张三</div>
      <div class="contentTit">物资主管：李四</div>
    </div>

    <el-table v-loading="loading" ref="multipleTable" :data="tableData" show-summary border>
      <el-table-column label="序号" width="55" align="center">
        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column prop="name" label="工区" align="center"></el-table-column>
      <el-table-column prop="name" label="材料种类" align="center"></el-table-column>
      <el-table-column prop="name" label="规格" align="center"></el-table-column>
      <el-table-column prop="name" label="直径" align="center"></el-table-column>
      <el-table-column prop="weight" label="理重(t)" align="center"></el-table-column>
      <el-table-column prop="weight" label="厂家重(t)" align="center"></el-table-column>
      <el-table-column prop="weight" label="实重(t)" align="center"></el-table-column>
    </el-table>

    <div class="header">按工区</div>

    <el-table :cell-class-name="columnStyle" :span-method="objectSpanMethod" v-loading="loading" ref="multipleTable" :data="tableData" show-summary border>
      <el-table-column label="序号" width="55" align="center">
        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column prop="name" label="工区" align="center"></el-table-column>
      <el-table-column prop="name" label="材料种类" align="center"></el-table-column>
      <el-table-column prop="name" label="规格" align="center"></el-table-column>
      <el-table-column prop="name" label="直径" align="center"></el-table-column>
      <el-table-column prop="weight" label="理重(t)" align="center"></el-table-column>
      <el-table-column prop="weight" label="厂家重(t)" align="center"></el-table-column>
      <el-table-column prop="weight" label="实重(t)" align="center"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'Processing',
  components: {},
  props: {},
  data() {
    return {
      form: {},
      loading: false,
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          weight: 20
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          weight: 20
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          weight: 20
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          weight: 20
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          weight: 20
        },
      ],
    }
  },
  filters: {},
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      console.log(rowIndex, columnIndex)
      if (columnIndex === 1) {
        if (rowIndex % 3 === 0) {
          return {
            rowspan: 3,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }

      // if (rowIndex / 2 === 1) {
      //   if (columnIndex === 2) {
      //     return [1, 6];
      //   } else if (columnIndex === 3) {
      //     return [0, 0];
      //   } else if (columnIndex === 4) {
      //     return [0, 0];
      //   } else if (columnIndex === 5) {
      //     return [0, 0];
      //   } else if (columnIndex === 6) {
      //     return [0, 0];
      //   } else if (columnIndex === 7) {
      //     return [0, 0];
      //   }
      // }
    },
    columnStyle({ row, column, rowIndex, columnIndex }) {
      if (rowIndex % 3 === 2) {
        if (columnIndex >= 2) {
          return 'total'
        }
      }
    },
  }
}
</script>

<style scoped lang="scss">
::v-deep {
  .total {
    background: #F5F7FA;
  }
}
.header {
  font-weight: 500;
  font-size: 20px;
  color: #101010;
  margin: 40px 0;
}
.content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .contentTit {
    width: 50%;
    font-weight: 400;
    font-size: 16px;
    color: #101010;
    margin-bottom: 20px;
  }
}
</style>
